<script setup lang="ts">
import {ref} from "vue";
import useHomeStore from "@/store/home";
import router from "@/router";

const homeStore = useHomeStore();

const searchContent = ref()

const querySearch = (keyWord: string, cb: any) => {
  homeStore.getHospitalNameData(keyWord)
  const result = homeStore.hospitalNames.map(item => {
    return {
      value: item.hosname
    }
  })
  //展示数据
  cb(result)
}


const handleSelect = () => {
 //跳转医院详情页
  router.push("/hospital/register")
}

</script>

<template>
  <div class="search">
    <el-autocomplete
        v-model="searchContent"
        :fetch-suggestions="querySearch"
        clearable
        class="inline-input w-50"
        placeholder="请输入医院名称"
        trigger-on-focus="false"
        @select="handleSelect"
    />
    <el-button class="btn" type="primary" icon="Search">搜索</el-button>
  </div>
</template>

<style scoped lang="less">
.search {
  display: flex;
  justify-content: center;
  width: 100%;

  :deep(.el-input__wrapper) {
    width: 600px;
  }

  .btn {
    margin-left: 10px;
  }
}


</style>
